<template>
  <view class="container">
    <!-- 顶部选项卡 -->
    <scroll-view scroll-x class="nav-scroll">
      <view 
        v-for="(item, index) in tabs" 
        :key="index"
        class="nav-item"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        {{ item }}
      </view>
    </scroll-view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <view 
        v-for="(order, index) in filteredOrders"
        :key="order.id"
        class="order-item"
      >
        <view class="order-header">
          <text>订单编号：{{ order.orderNo }}</text>
          <text class="status">{{ statusMap[order.status] }}</text>
        </view>
        
        <view class="order-info">
          <text class="label">服务项目：</text>
          <text>{{ order.serviceName }}</text>
        </view>
        
        <view class="order-info">
          <text class="label">服务门店：</text>
          <text>{{ order.storeName }}</text>
        </view>
        
        <view class="order-info">
          <text class="label">下单时间：</text>
          <text>{{ order.createTime }}</text>
        </view>
        
        <view class="order-footer">
          <text class="price">实付金额：￥{{ order.amount }}</text>
          <view class="buttons">
            <button 
              v-for="(btn, btnIndex) in getActions(order.status)" 
              :key="btnIndex"
              class="action-btn"
              @click="handleAction(btn.action, order)"
            >
              {{ btn.text }}
            </button>
          </view>
        </view>
      </view>
    </scroll-view>
	<!-- 取消订单弹窗 -->
	<CancelDialog 
	  ref="cancelDialogRef"
	  :current-order="selectedOrder"
	  @confirm="handleCancelOrder"
	/>
	<ReqRefund
	  ref="ReqRefundRef"
	  :current-order="selectedOrder"
	  @confirm="handleRefundOrder"
	/>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import CancelDialog from './components/CancelDialog.vue'
import ReqRefund from './components/ReqRefund.vue'

// 状态定义
const tabs = ['全部', '待支付', '待使用', '待评价'];
const statusMap = {
  0: '待支付',
  1: '待使用',
  2: '待评价',
  3: '已完成'
};

// 响应式数据
const activeTab = ref(0);
const orders = reactive([
  // 测试数据
  {
    id: 1,
    orderNo: '20230801123456',
    serviceName: '基础保洁服务',
    storeName: '朝阳门店',
    createTime: '2023-08-01 10:00',
    amount: 199.00,
    status: 0
  },
  {
    id: 2,
    orderNo: '20230802123456',
    serviceName: '深度清洁服务',
    storeName: '海淀门店',
    createTime: '2023-08-02 14:30',
    amount: 399.00,
    status: 1
  },
  {
    id: 3,
    orderNo: '20230803123456',
    serviceName: '家电清洗服务',
    storeName: '丰台门店',
    createTime: '2023-08-03 09:45',
    amount: 299.00,
    status: 2
  }
]);

// 计算属性：过滤订单
const filteredOrders = computed(() => {
  if(activeTab.value === 0) return orders;
  return orders.filter(order => order.status === activeTab.value - 1);
});

// 操作方法配置
const getActions = (status) => {
  const actionsMap = {
    0: [
      { text: '立即支付', action: 'pay' },
      { text: '取消订单', action: 'cancel' }
    ],
    1: [
      { text: '申请退款', action: 'refund' },
      { text: '扫码结算', action: 'scan' }
    ],
    2: [
      { text: '立即评价', action: 'comment' },
      { text: '再来一单', action: 'reorder' }
    ]
  };
  return actionsMap[status] || [];
};

// 切换选项卡
const switchTab = (index) => {
  activeTab.value = index;
};

// 点击立即评价跳转页面方法
const toEvaluation = (order)=>{
	console.log("toEvaluation被执行"+order.orderNo);
	uni.navigateTo({
		url: '/pages/myorder/components/Evaluation?merchanId='+'xxxx-sahngjiaID-sb250'+'&orderNo='+order.orderNo
	});
}
//  点击取消订单弹窗
		const cancelDialogRef = ref(null);
		const selectedOrder = ref({});
		
		const onCancelOrder = (order) => {
		  selectedOrder.value = order;
		  cancelDialogRef.value.openDialog();
		}

		// 实际取消订单操作
		const handleCancelOrder = (order) => {
		  // 调用取消订单API
			console.log('取消', order.orderNo);
		}
// 点击立即支付函数

// 点击申请退款函数
		const ReqRefundRef = ref(null);

		const onRefundOrder = (order) => {
		  selectedOrder.value = order;
		  ReqRefundRef.value.openDialog();
		}

		// 实际退款操作
		const handleRefundOrder = (order) => {
		  // 调用退款API
			console.log('退款', order.orderNo);
		}
// 点击扫码结算函数
   //  根据订单编号生成二维码
   
// 点击再来一旦函数


// 处理按钮操作
const handleAction = (action, order) => {
  console.log('执行操作:', action, order);
  // 这里添加实际业务逻辑
  switch(action) {
    case 'pay':
      // 跳转支付逻辑
	    console.log('支付', order.orderNo);
      break;
    case 'cancel':
      // 取消订单逻辑
	   onCancelOrder(order)
      break;
    case 'refund':
      // 退款逻辑
	  onRefundOrder(order)
	   console.log('退款', order.orderNo);
      break;
    case 'scan':
      // 扫码逻辑
	   console.log('扫个码', order.orderNo);
      break;
    case 'comment':
      // 评价逻辑  pages/myorder/components/Evaluation
	  toEvaluation(order)
      break;
    case 'reorder':
      // 再来一单逻辑
	   console.log('送你攒劲的节目', order.orderNo);
      break;
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-scroll {
  background-color: #fff;
  height: 80rpx;
  white-space: nowrap;
}

.nav-item {
  display: inline-block;
  padding: 0 30rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #666;
}

.nav-item.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}

.order-list {
  flex: 1;
  padding: 20rpx;
}

.order-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.status {
  color: #007AFF;
}

.order-info {
  margin-bottom: 12rpx;
  font-size: 26rpx;
  color: #666;
}

.label {
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.price {
  color: #ff5000;
  font-size: 28rpx;
}

.buttons {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  padding: 8rpx 24rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  border: 1rpx solid #ccc;
  background: #fff;
}

.action-btn:active {
  background-color: #f5f5f5;
}
</style>